import React from 'react';
import box from '../assets/box.jpg'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { staff_login } from '../utils/api'
import { useHistory } from 'react-router-dom'
function Login(props) {
    var history = useHistory()

    //验证通过时 调用
    var onFinish = (values) => {
        staff_login(values).then((res) => {
            if (res.data.code === 200) {
                console.log(res.data);
                message.success(res.data.msg);
                //保存token
                localStorage.setItem('token', res.data.token)
                //保存userinfo
                localStorage.setItem('userinfo', JSON.stringify(res.data.userInfo))
                //跳转到首页
                history.push('/index');

            } else {
                message.error(res.data.msg)
            }
        })
    }



    return (
        <div className='login'>
            <img src={box} alt="" />
            <div className='form_box'>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                >
                    <div className='register_1'>用户登陆</div>
                    <Form.Item
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        name="pass"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入密码"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>记住密码</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="">
                            忘记密码
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登陆
                        </Button>
                        或者 <a href="http://localhost:3000/register">没有账号去注册!</a>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;